<h2>[+lang.IM_title_reorder_items+]</h2>
[+view.message+]

<style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 25px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    #sortable li span.ui-icon-arrowthick-2-n-s { margin-top:3px;}
    .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

</style>

<form name="form_reorder_items" action="index.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="a" value="[+action_id+]" />
<input type="hidden" name="id" value="[+module_id+]" />
<input type="hidden" name="page" value="[+item_type+]" />
<input type="hidden" id="new_orders" name="new_orders" value="" />
<input name="btn_submit" class="button" type="submit" value="Update Items Position" />
<br />
<br />
<select name="category_id" onchange="document.form_reorder_items.submit();">
    <option value="0">None</option>
    [+select.categories+]
</select>
<br />
<br />

[+view.products+]

</form>

<script>
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            update: function (event, ui)
            {
                $("#new_orders").val($( "#sortable" ).sortable('toArray'));
            }
        });
        $( "#sortable" ).disableSelection();
        $("#new_orders").val($( "#sortable" ).sortable('toArray'));
    });
</script>